<template>
  <main>
    <h2>我是首页(测试导航守卫)</h2>
    <!-- router-link: 路由入口组件，它最终在页面上是a标签，但是它不会重新访问站点 -->
    <ul>
      <router-link to="/index"><h3>首页</h3></router-link>
      <router-link to="/my-center"><h3>个人中心</h3></router-link>
      <router-link to="/my-cart"><h3>购物车</h3></router-link>
      <router-link to="/login"><h3>登录</h3></router-link>
    </ul>
    <hr />
    <!-- 路由出口，用于展示路由出来的组件 -->
    <h2>路由出口</h2>
    <router-view v-slot="{ Component }">
      <keep-alive>
        <component :is="Component" />
      </keep-alive>
    </router-view>
  </main>
</template>
  
  <script>
export default {
  name: "App",
  data() {
    return {
    }
  }
};
</script>
  
  <style>
* {
  padding: 0px;
  margin: 0px;
  list-style: none;
  text-decoration: none;
  box-sizing: border-box;
}
</style>
